<!-- src/components/JobSeekerView.vue -->
<template>
  <div class="full-width row justify-between">
    <div class="col-6 q-pt-md">
      <div class="full-width job-content">
        <div class="q-gutter-md text-left">
          <q-card class="item inline-block" v-for="job in filteredJobs as JobPost[]" :key="job.id"
                  @click="showJob(job)"
                  :class="{ 'bg-primary text-white': selectedJob?.id === job.id}">
            <q-card-section class="full-height">
              <div class="row justify-between">
                <span class="col text-weight-bold content-overflow-hidden">{{ job.title }}</span>
                <span class="col text-red text-weight-bold content-overflow-hidden"
                  :class="selectedJob?.id === job.id ? 'text-red-11' : 'text-red'"
                >{{job.salary}}</span>
              </div>
              <div class="row q-my-sm content-overflow-hidden">{{ job.requirements }}</div>
              <div class="row justify-between absolute-bottom" style="bottom: 5px">
                <span class="col-4 q-mx-sm"><q-icon name="apartment"/>{{ job.company }}</span>
                <span class="col-4 q-mx-sm text-right"><q-icon name="location_on"/>{{ job.location }}</span>
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
    <div class="col-6">
      <!-- 职位详情 -->
      <q-card class="q-my-md job-detail bg-primary" v-if="selectedJob">
        <q-banner class="bg-primary" style="height: 10vh">
          <div class="full-width row justify-between text-white">
            <div class="col-auto text-weight-bolder text-h4 text-right">
              {{ selectedJob?.title }}
              <span class="col text-red-11 text-weight-bold text-h6">{{selectedJob?.salary}}</span>
            </div>
            <div class="col-3 overflow-hidden self-center requirements">
              <div>{{selectedJob?.location}}<span class="text-weight-bolder q-mx-sm">·</span>{{selectedJob?.company}}</div>
            </div>
            <div class="col-2 text-right self-center">
              <q-btn color="white" label="投递" text-color="primary"
                     @click="showUploadDialog = true"/>
            </div>
          </div>
          <div class="full-width q-mt-md content-overflow-hidden text-left text-white">{{selectedJob.requirements}}</div>
          <q-separator class="q-my-md" color="white"/>
        </q-banner>
        <q-card-section class="q-pa-none q-mx-md q-my-md">
          <div class="text-left description q-px-sm bg-white">
            {{selectedJob.description}}
          </div>
        </q-card-section>
      </q-card>
    </div>

  </div>
    <!-- 简历投递弹窗 -->
    <q-dialog v-model="showUploadDialog" @show="loadResumes">
      <q-card style="width: 500px; max-width: 80vw;">
        <q-banner class="bg-primary text-white q-pb-none">
          <h6 class="row justify-between q-ma-none text-weight-bold">
            <div class="col">{{ selectedJob?.title }}</div>
            <div class="col text-right">
              {{ selectedJob?.location }}<span class="text-weight-bolder q-mx-sm">·</span>{{ selectedJob?.company }}
            </div>
          </h6>
          <q-separator class="q-my-md" color="white"/>
        </q-banner>
        <q-card-section>
          <q-radio name="resume" v-model="applyResume" :val="resume.id" :label="resume.fileName" v-for="resume in resumes as Resume[]" :key="resume.id"
                   left-label
                   checked-icon="task_alt" unchecked-icon="panorama_fish_eye" @click="selectResume(resume)"/>
        </q-card-section>
        <q-card-actions class="row justify-between full-width q-px-md">
          <div class="col-7"><span v-if="!applyResume" class="text-negative">*请选择简历，如果没有，请先上传简历</span></div>
          <div class="col-auto text-right">
            <q-btn flat label="取消" v-close-popup />
            <q-btn color="primary" label="投递" :disable="!allowApplyResume" @click="submitResume"/>
          </div>
        </q-card-actions>
      </q-card>
    </q-dialog>
</template>
<style scoped lang="sass">
.content-overflow-hidden
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
.job-content
  overflow: scroll
  height: 91vh
  .job-list
    display: grid
    grid-template-columns: repeat(3, 1fr)
  .item
    height: 100px
    width: 30%
.job-detail
  height: 91vh
  .requirements
    font-size: 16px
    font-weight: bolder
  .description
    border: 1px solid #ccc
    border-radius: 10px
    height: 78vh
    white-space: pre-wrap
    font-size: 16px
    overflow: scroll

</style>
<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {JOB_SEEKER_ROLE, JobPost, Resume, ResumeReport} from "../vite-env.d";
import JobSeekerService from "../services/JobSeekerService"
import {LocalStorageUtil} from "../assets/local-storage.ts";

const jobSeekerService = new JobSeekerService();
const selectedJob = ref<JobPost | null>(null)
const showUploadDialog = ref(false)
const applyResume = ref<number | null>(null)
const allowApplyResume = ref<boolean>(!!applyResume.value)
const selectedResume = ref<Resume | null>(null)
const resumeReport = ref<ResumeReport | null>(null)
const jobs = ref<JobPost[]>([]);  //原数据
const filteredJobs = ref<JobPost[]>([]);  //过滤数据
const resumes = ref<Resume[]>([]);

// 提交简历
const submitResume = async () => {
  if (!selectedResume.value){
    alert(`请选择简历`);
    return;
  }
  allowApplyResume.value = false;
  const {type, user} = await LocalStorageUtil.getCurrentUser()
  if (type == JOB_SEEKER_ROLE && user) {
    // 生成模拟匹配结果
    const result = await jobSeekerService.applyJobPost(user.id, selectedJob.value.id, selectedResume.value.id);
    // 显示匹配结果
    alert(`简历匹配度：${result}%`);
  }
};


const showJob = (job: JobPost) => {
  selectedJob.value = job;
};
const selectResume = (resume: Resume) => {
  allowApplyResume.value = true
  selectedResume.value = resume
}
const getResumePage = async () => {
  const {type, user} = await LocalStorageUtil.getCurrentUser()
  if (type == JOB_SEEKER_ROLE && user) {
    const user = LocalStorageUtil.getItem('currentUser')?.data
    const data = await jobSeekerService.getResumePages(user?.id);
    if (data)
      resumes.value = data;
  }
}
const loadResumes = async () => {
  await getResumePage()
}
defineExpose({
  searchJob: (searchKeyword: string) => {
    filteredJobs.value = jobs.value.filter(job =>
        job.title.toLowerCase().includes(searchKeyword.toLowerCase()) ||
        job.company.toLowerCase().includes(searchKeyword.toLowerCase())
    );
    selectedJob.value = filteredJobs.value[0];
  }
})

onMounted(async () => {
  jobs.value = await jobSeekerService.loadJobs();
  filteredJobs.value = jobs.value;
  if (filteredJobs.value.length > 0) {
    selectedJob.value = filteredJobs.value[0];
  }
});

</script>